<template>
  <div style="margin-top: 15px;height: 100%">
    <el-container>
<!--      分类-->
      <el-aside>
        <el-card style="height: 95%">
          <div slot="header" >
            <span>分类</span>
          </div>
          <div v-for="(kind,index) in kind" :key="index">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <p @click="ToShoppingPage" class="title">{{kind}}</p>
              <el-breadcrumb-item
                class="title"
                v-for="(item,index) in list[index]"
                :key="index"
              @click.native="ToShoppingPage">
                {{ item }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-card>
      </el-aside>
      <el-container>
<!--        第二头部导航-->
        <el-header>
          <navi-bar></navi-bar>
        </el-header>
<!--        走马灯+用户信息-->
        <el-container>
<!--          走马灯-->
          <el-aside style="width: 50%">
            <div class="block">
                <el-carousel style="padding: 20px" >
                  <el-carousel-item v-for="item in imagebox" :key="item.id">
                    <img :src="item.idView" class="image">
                  </el-carousel-item>
                </el-carousel>
            </div>
          </el-aside>
<!--          用户信息-->
          <el-main style="width: 50%">
            <el-card style="height: 100%;width: 100%">
              <el-descriptions class="margin-top" title="用户信息" :column="1" size="medium" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{ userInfo.userName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{ userInfo.phone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  账号
                </template>
                {{ userInfo.account }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i v-if="userInfo.gender==='女'" class="el-icon-female"></i>
                  <i v-if="userInfo.gender==='男'"  class="el-icon-male"></i>
                  性别
                </template>
                {{userInfo.gender}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-s-custom"></i>
                  身份
                </template>
                <el-tag v-if="userInfo.status===0" type="">管理员</el-tag>
                <el-tag v-else type="success">普通用户</el-tag>
              </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-main>
        </el-container>

      </el-container>
    </el-container>
<!--    每日推荐-->
    <el-card style="height: 75%;margin: 10px">
      <h3>每日推荐</h3>
      <Recommend></Recommend>
    </el-card>
  </div>
</template>

<script>

import NaviBar from "./naviBar";
import Recommend from "./recommend";
import {FindUserByAccount,FindUserByPhone} from "@/api";


export default {
  name: "Content",
  components: {Recommend, NaviBar},
  data(){
    return{
      imagebox:[
        {id:0,idView: require('../assets/蔬菜生鲜.jpg')},
        {id:1,idView: require('../assets/外卖.jpg')},
        {id:2,idView: require('../assets/医疗服务.jpg')},
        {id:3,idView: require('../assets/绿化基地.jpg')}
      ],
      list: [
        {1:'保健', 2:'进口',3:'常备'},
        {1:'笔记本',2:'钢笔',3:'计算器'},
        {1:'生鲜',2:'零食',3:'水果'},
        {1:'洗发水',2:'洗面奶',3:'厨具'}
      ],
      kind:['医药','办公','食品','日化'],
      userInfo:{
        userName:'',
        phone:'',
        status:'',
        gender:'',
        account:''
      },
      screenWidth :0,
    }
  },
  methods:{
    setSize:function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    ToShoppingPage(){
      this.$router.push('/Shopping')
    },
    async getUserInfo(){
      if(this.GLOBAL.phone===''){
        FindUserByAccount(this.GLOBAL.account).then(res=>{
          this.userInfo=res.data[0]
          // console.log(res.data[0])
        })
      }
      else if(this.GLOBAL.account === ''){
        FindUserByPhone(this.GLOBAL.phone).then(res=>{
          this.userInfo = res.data[0]
        })
      }
    }
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth =  window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () =>{
      this.screenWidth =  window.innerWidth;
      this.setSize();
    };
    this.getUserInfo()
  }
}
</script>

<style scoped>
.title:hover{
  color: red;
}
.title{
  cursor: pointer;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
img{
  /*设置图片宽度和浏览器宽度一致*/
  width:100%;
  height:inherit;
}
</style>
